<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" size="small">
      <!--      <el-form-item label="回传开关" prop="is_publish">
        <div class="flex ai-center">
          <el-switch v-model="form.flag" />
          <p class="ml-10">{{ form.flag ? '开启' : '关闭' }}</p>
        </div>
      </el-form-item>-->
      <el-form-item label="回传规则名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入回传规则名称" />
      </el-form-item>
      <el-form-item label="回传方式" prop="report_type">
        <el-radio-group v-model="form.report_type">
          <el-radio :label="1">付费</el-radio>
          <el-radio :label="2">有效获客</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="付费回传用户类型" prop="report_type">
        <el-checkbox v-model="form.rep_user_type">仅回传新注册用户</el-checkbox>
      </el-form-item>
      <el-form-item label="广告回传配置" prop="report_type" class="report_type_nav">
        <el-radio-group v-model="form.adv_report_type" @change="advReportTypeChange">
          <div v-for="key in Object.keys(ADV_REPORT_TYPE)" :key="key">
            <p v-show="key == '1'" class="font-14  pt-10 pb-20">首充</p>
            <p v-show="key == '6'" class="font-14 pt-10 pb-20">所有充值</p>
            <p v-show="key == '11'" class="font-14 pt-10 pb-20">ROI全量上报</p>
            <el-radio :label="key">
              <span>{{ ADV_REPORT_TYPE[key] }}</span>
              <span class="ml-10" style="color: red" v-if="['4','9'].includes(key)">推荐</span>
            </el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="订单回传比例类型" prop="order_pro">
        <el-radio-group v-model="form.order_report_type" @change="orderReportTypeChange">
          <div class="flex ai-center mb-10">
            <el-radio :label="1">按订单比例上报</el-radio>
            <template v-if="form.order_report_type === 1">
              <el-input v-model="form.order_pro" type="number" placeholder="请输入比例">
                <template slot="append">%</template>
              </el-input>
            </template>
          </div>
          <div class="flex ai-center mb-10">
            <el-radio :label="2">按数量</el-radio>
            <template v-if="form.order_report_type === 2">
              <p class="font-14 font-color-td">每</p>
              <el-input v-model="form.order_num" type="number" class="ml-10 mr-10" style="width: 200px" />
              <p class="font-14 font-color-td">条回传前</p>
              <el-input v-model="form.order_report_num" type="number" class="ml-10 mr-10" style="width: 200px" />
              <p class="font-14 font-color-td">条</p>
            </template>
          </div>
        </el-radio-group>
      </el-form-item>
      <template v-if="['1', '2','3','4','5'].includes(form.adv_report_type)">
        <el-form-item label="首充最低回传金额" prop="first_pay_min_price">
          <el-input v-model="form.first_pay_min_price" type="number" placeholder="请输入首充最低回传金额" />
        </el-form-item>
      </template>
      <template v-else-if="['6', '7','8','9','10'].includes(form.adv_report_type)">
        <el-form-item label="累计最低回传金额" prop="pay_min_price">
          <div class="flex ai-center">
            <el-input v-model="form.pay_min_price" type="number" placeholder="请输入累计最低回传金额" class="width-30" />
            <p class="font-14 ml-10" style="color: #BD3124">设置0则表示关闭该功能，累计最低金额需要大于等于首充最低金额，非必填</p>
          </div>
        </el-form-item>
      </template>
    </el-form>

    <div class="flex ai-center jc-center pb-50">
      <el-button type="info" plain @click="handleBack">返回</el-button>
      <el-button type="success" @click="handleVerify">{{ isEdit ? '修改' : '添加' }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  addChannelConfig,
  editChannelConfig,
  queryChannelConfigInfo,
  ADV_REPORT_TYPE
} from '@/api/config/channelPostBack.js'

export default {
  name: 'ChannelPostBackAdd',
  data() {
    return {
      ADV_REPORT_TYPE,
      // 表单参数
      form: {
        name: undefined,
        report_type: 1, // 1-付费 2-有效获客
        rep_user_type: true, //  0-全部 1-仅上报新注册用户
        adv_report_type: '1', // 因为使用Object.keys获取到时string类型
        order_report_type: 1, // 1-按订单比例上报 2-按数量
        order_pro: undefined,
        order_num: undefined,
        order_report_num: undefined,
        first_pay_min_price: undefined,
        pay_min_price: undefined
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入回传规则名称', trigger: ['blur', 'change'] }
        ],
        pay_min_price: {
          validator: (rule, value, callback) => {
            if (value && Number(value) < Number(this.form.first_pay_min_price)) callback(new Error('需要大于等于首充最低回传金额'))
            else callback()
          },
          trigger: ['blur', 'change']
        },
        order_pro: {
          // 限制10的倍数
          validator: (rule, value, callback) => {
            const numVal = Number(value)
            if (this.form.order_report_type === 1) {
              if (!value) callback(new Error('请输入比例'))
              else if (value && numVal % 10 != 0) callback(new Error('请输入10的倍数'))
              else if (numVal > 100) callback(new Error('请输入100以内的数字'))
              else callback()
            } else if (this.form.order_report_type === 2) {
              if (!this.form.order_num || !this.form.order_report_num) callback(new Error('请输入数量'))
              else if (this.form.order_num <= 0 || this.form.order_report_num <= 0) callback(new Error('数量应该大于0'))
              else callback()
            } else {
              callback()
            }
          },
          trigger: ['blur', 'change']
        }
      }
    }
  },
  computed: {
    isEdit() {
      return ![undefined, ''].includes(this.form.id)
    }
  },
  watch: {
    '$route.query': {
      handler(val) {
        const { id } = this.$route.query
        this.form.id = id
        this.queryChannelConfigInfoFn()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async queryChannelConfigInfoFn() {
      if (!this.form.id) return

      const data = await queryChannelConfigInfo({
        id: this.form.id
      })

      console.log('data=返回，', data)

      data.rep_user_type = data.rep_user_type === 1
      data.adv_report_type = data.adv_report_type.toString()
      data.order_pro = data.order_pro ? Number(data.order_pro) * 100 : undefined
      data.order_num = data.order_num || undefined
      data.order_report_num = data.order_report_num || undefined
      this.form = data

      console.log('处理后的form=返回，', this.form)
    },
    advReportTypeChange() {
      this.form.first_pay_min_price = undefined
      this.form.pay_min_price = undefined
    },
    orderReportTypeChange() {
      this.form.order_num = undefined
      this.form.order_report_num = undefined
      this.form.order_pro = undefined
      console.log(this.form)
    },
    async handleBack() {
      await this.$tab.closePage({
        path: '/config/channelPostBack/add', name: 'ChannelPostBackAdd'
      })
      await this.$tab.refreshPage({ path: '/config/channelPostBack/list', name: 'ChannelPostBackList' })
      await this.$tab.openPage('渠道回传配置', '/config/channelPostBack/list')
    },
    handleVerify() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.form.rep_user_type = this.form.rep_user_type ? 1 : 0
          this.form.order_pro = this.form.order_pro ? this.form.order_pro / 100 : 0
          this.form.order_num = this.form.order_num || 0
          this.form.order_report_num = this.form.order_report_num || 0
          if (this.isEdit) {
            editChannelConfig(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.handleBack()
            })
          } else {
            addChannelConfig(this.form).then(res => {
              this.$modal.msgSuccess('添加成功')
              this.handleBack()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.report_type_nav {
  ::v-deep .el-radio{
    margin-bottom: 10px;
  }
}

.el-form {
  padding: 20px;
  margin: 20px;
  border: 1px solid #dddddd;
}
</style>
